<template>
  <div class="home">
    <!-- 轮播图 -->
    <mt-swipe  class="swipth" >
      <mt-swipe-item v-for="(item,index) in imgs" :key="index">
        <a :href="item.img"><img :src="item.img" alt="" style="width:100%"></a>
      </mt-swipe-item>
    </mt-swipe>
   <!-- 产品列表 -->
    <div id="news">
      <div class="newslist" v-for="(item,index) in newslist" :key="index">
        <div class="newslist-img">
          <router-link :to="{name:item.name}"><img :src="item.img" alt="" width="100%" height="100%"></router-link>
        </div>
        <div class="newslist-text">
          <h5>{{item.news}}</h5>
          <span>{{item.date}}</span>
          <span>{{item.click}}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name:'Home',
  data(){
    return{
      imgs:[
        {img:require('@/assets/111.jpg')},
        {img:require('@/assets/222.jpg')},
        {img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566487023344&di=b8951869cd13ba9f0211f696490052cd&imgtype=0&src=http%3A%2F%2Fimg3.cache.netease.com%2Fphoto%2F0001%2F2009-10-30%2F5MSAR3JG00AQ0001.jpg'},
        {img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566486898646&di=a250a9a70d591243bcbbdb0499657592&imgtype=0&src=http%3A%2F%2Fpic39.nipic.com%2F20140320%2F12795880_110914420143_2.jpg'},
        {img:'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1566486898479&di=ba92a001a1ed21481609a112d0078628&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201210%2F06%2F20121006104610_A8RFm.jpeg'}

      ],
      newslist:[
        {name:'newslist',news:'好钓好线好钓鱼',img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3907641660,132109804&fm=15&gp=0.jpg',title:'鱼钓',click:1111,date:'2018-02-02'},
        {name:'newslist',news:'好钓好线好钓鱼',img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3907641660,132109804&fm=15&gp=0.jpg',title:'鱼钓',click:1111,date:'2018-02-02'},
        {name:'newslist',news:'好钓好线好钓鱼',img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3907641660,132109804&fm=15&gp=0.jpg',title:'鱼钓',click:1111,date:'2018-02-02'},
        {name:'newslist',news:'好钓好线好钓鱼',img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3907641660,132109804&fm=15&gp=0.jpg',title:'鱼钓',click:1111,date:'2018-02-02'},
        {name:'newslist',news:'好钓好线好钓鱼',img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3907641660,132109804&fm=15&gp=0.jpg',title:'鱼钓',click:1111,date:'2018-02-02'},
        {name:'newslist',news:'好钓好线好钓鱼',img:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3907641660,132109804&fm=15&gp=0.jpg',title:'鱼钓',click:1111,date:'2018-02-02'}
      ]
    }
  }
  }


</script>
<style lang="css" scope>
.home{
  width:100%;
  height: 250px;
}
.swipth a{
  width: 100%;
  height: 250px;
  display: inline-block
}
.swipth img{
  width:100%;
  height: 250px;

  overflow: hidden;

}
img{
  width:100%;
}
.newslist{
  width:100%;
  height: 100px;
  padding:5px;
  box-sizing: border-box;
  box-shadow: 2px 2px 2px 0px #ccc;

}
.newslist .newslist-img{
  width: 40%;
  height:100%;
  float: left;
}

.newslist .newslist-text{
  width: 60%;
  height: 100%;
  float: right;
  text-align: center;
  background-color: rgba(0,0,0,0.1);
}
.newslist .newslist-text span{
  display: inline-block;
  margin: 0 20px;
}
</style>
